<template>
<el-dialog
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="changedialogVisible"
    >
  <div class="app-container">
   <!-- <div class="nav">
      <el-button icon="el-icon-view" >分享</el-button>
    </div>-->
    <div class="content">
      <div class="panel">
        <div class="title">
          <div class="right">
            <img src="/static/img/logo1.4e84ae0f.png" style="width: 80px" />
          </div>
        </div>
        <div class="showPanel">
          <div class="leftImg">
            <img v-if="projectShowDetailInfo.projectMain" :src="projectShowDetailInfo.projectMain.storagePath" />
          </div>
          <div class="rightInfo">
            <div class="line1">
              <!--<i class="el-icon-folder" />-->
              <img src="@/assets/image/title1.png" width="20px" />
              <label>{{ projectShowDetailInfo.showProjectname }}</label>
            </div>
            <div class="line2">
              <div class="tag"></div>
              <label>项目概况</label>
            </div>
            <div class="line3">{{ projectShowDetailInfo.projectDesc }}{{ projectShowDetailInfo.projectDesc }}{{ projectShowDetailInfo.projectDesc }}</div>
          </div>
        </div>
      </div>
      <div class="tabletitle">
        <el-row :gutter="20">
          <el-col :span="8" >
            <div class="input-wrap">
              <div class="input-label">项目代码</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.code"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.party">
            <div class="input-wrap">
              <div class="input-label">委托单位</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.party"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.status">
            <div class="input-wrap">
              <div class="input-label">项目进展</div>
              <div class="input-content">
                <el-select v-model="projectShowDetailInfo.status" placeholder="请选择项目进展" :disabled="!isEdit">
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                  :disabled="dict.dictValue==='6'?true:false"
                />
              </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.useBusinessCategory">
            <div class="input-wrap">
              <div class="input-label">服务类别</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.useBusinessCategory"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <!--<el-col :span="24" v-if="projectShowDetailInfo.businessCategory">
            <div class="input-wrap">
              <div class="input-label">包含业务类别</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.businessCategory"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>-->
          <el-col :span="8" v-if="projectShowDetailInfo.startDate">
            <div class="input-wrap">
              <div class="input-label">开始服务日期</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.startDate"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.endDate">
            <div class="input-wrap">
              <div class="input-label">完成服务日期</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.endDate"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.areaName">
            <div class="input-wrap">
              <div class="input-label">所在地区</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.areaName"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.address">
            <div class="input-wrap">
              <div class="input-label">项目地址</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.address"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.investment">
            <div class="input-wrap">
              <div class="input-label">项目总投资(万元)</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.investment"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.industrys && projectShowDetailInfo.industrys.length>0">
            <div class="input-wrap">
              <div class="input-label">所属行业</div>
              <div class="input-content">
                <el-cascader
                v-model="projectShowDetailInfo.industrys"
                :options="industryOptions"
                filterable
                clearable
                :props="{ value: 'id',checkStrictly: true }"
                style="width:100%"
                :disabled="!isEdit"
              />
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="projectShowDetailInfo.constructionType">
            <div class="input-wrap">
              <div class="input-label">建设类型</div>
              <div class="input-content">
                <el-select
                v-model="projectShowDetailInfo.constructionType"
                placeholder="请选择建设类型"
                :disabled="!isEdit"
                clearable
              >
                <el-option label="新建" value="0" />
                <el-option label="改扩建" value="1" />
              </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.content">
            <div class="input-wrap">
              <div class="input-label">建设内容及规模</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.content"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.mainServiceContent">
            <div class="input-wrap">
              <div class="input-label">服务内容</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.mainServiceContent"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>

          <el-col :span="24" v-if="projectShowDetailInfo.showProjectMember">
            <div class="input-wrap">
              <div class="input-label">服务团队</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.showProjectMember"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.specEffect">
            <div class="input-wrap">
              <div class="input-label">项目特点与成效</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.specEffect"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.showHonor">
            <div class="input-wrap">
              <div class="input-label">项目所获荣誉</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.showHonor"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">项目特征</div>
              <div class="input-content">
                <el-input
                  type="textarea"
                  autosize
                  v-model="projectShowDetailInfo.engineerings"
                  :disabled="!isEdit"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="projectShowDetailInfo.bmsAttachments && projectShowDetailInfo.bmsAttachments.length>0">
            <div class="input-wrap">
              <div class="input-label">项目图片</div>
            </div>
          </el-col>
           <el-col :span="24">
            <div
              v-if="projectShowDetailInfo.bmsAttachments && projectShowDetailInfo.bmsAttachments.length>0"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div
                v-if="currentIndex <= 0"
                style="
                  font-size: 20px;
                  background-color: #ddd;
                  color: #999;
                  opacity: 0.3;
                  cursor: pointer;
                  padding: 20px 10px;
                "
              >
                ◀
              </div>
              <div
                v-if="currentIndex > 0"
                style="
                  font-size: 20px;
                  background-color: #f3f6fa;
                  color: #8a8ec4;
                  cursor: pointer;
                  padding: 20px 10px;
                "
                @click="setCurrent(currentIndex - 1)"
              >
                ◀
              </div>
              <div
                style="
                  width: 90%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <div
                  v-if="currentIndex >= 1"
                  style="width: 30%"
                  @click="setCurrent(currentIndex - 1)"
                >
                  <img :src="projectShowDetailInfo.bmsAttachments[currentIndex - 1].storagePath" />
                </div>
                <div v-if="currentIndex < 1" style="width: 30%;"></div>
                <div style="width: 35%">
                  <img :src="projectShowDetailInfo.bmsAttachments[currentIndex].storagePath" />
                </div>
                <div
                  v-if="currentIndex <= projectShowDetailInfo.bmsAttachments.length - 2"
                  style="width: 30%"
                  @click="setCurrent(currentIndex + 1)"
                >
                  <img :src="projectShowDetailInfo.bmsAttachments[currentIndex + 1].storagePath" />
                </div>
                <div
                  v-if="currentIndex > projectShowDetailInfo.bmsAttachments.length - 2"
                  style="width: 30%;"></div>
              </div>
              <div
                v-if="currentIndex >= projectShowDetailInfo.bmsAttachments.length - 1"
                style="
                  font-size: 20px;
                  background-color: #ddd;
                  color: #999;
                  opacity: 0.3;
                  cursor: pointer;
                  padding: 20px 10px;
                "
              >
                ▶
              </div>
              <div
                v-if="currentIndex < projectShowDetailInfo.bmsAttachments.length - 1"
                style="
                  font-size: 20px;
                  background-color: #f3f6fa;
                  color: #8a8ec4;
                  cursor: pointer;
                  padding: 20px 10px;
                "
                @click="setCurrent(currentIndex + 1)"
              >
                ▶
              </div>
            </div>
          </el-col>
           <el-col
            :span="24"
            style="display: flex; justify-content: center; align-items: center"
          >
            <div
              v-for="(item, index) in projectShowDetailInfo.bmsAttachments"
              :key="index"
              style="padding: 4px; cursor: pointer"
              @click="setCurrent(index)"
            >
              <div
                v-show="index == currentIndex"
                style="
                  width: 20px;
                  height: 6px;
                  border-radius: 3px;
                  background-color: #4b91fb;
                "
              ></div>
              <div
                v-show="index != currentIndex"
                style="
                  width: 20px;
                  height: 6px;
                  border-radius: 3px;
                  background-color: #d4d8dc;
                "
              ></div>
            </div> </el-col
          >
          <el-col :span="24" v-if="projectShowDetailInfo.projectAtts && projectShowDetailInfo.projectAtts.length>0">
            <div class="input-wrap">
              <div class="input-label">附件</div>
              <div class="input-content">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #fafbfc;
                    padding: 10px;
                    margin: 2px;
                  "
                  :key="index"
                  v-for="(item, index) in projectShowDetailInfo.projectAtts"
                >
                  <div style="width: 80%;
                    height: 22px;
                    opacity: 1;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    font-weight: 400;
                    text-align: left;
                    color: #596174;
                    line-height: 22px;
                  ">
                    {{ item.fileName }}
                  </div>
                  <div
                    style="
                      width: 20%;
                      display: flex;
                      justify-content: flex-end;
                      align-items: center;
                    "
                  >
                    <el-button
                      icon="el-icon-view"
                      size="mini"
                      style="margin-right: 30px"
                      @click="preview(item)"
                      >预览</el-button
                    >
                   <!-- <el-button
                      icon="el-icon-download"
                      size="mini"
                      style="margin-right: 30px"
                      @click="download(index)"
                      >下载</el-button>-->
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</el-dialog>
</template>

<script>
import { industryCategoryTreeTwo } from '@/api/industryCategory';
import {
  projectIndex,
  updateIndex,
  getIndicators
} from '@/api/projectWorkbench/projectList/projectIndex';
export default {
  name: "ProjectShowDetail",
  components: {},
  props: {
    projectShowInfo: {
      type: Object,
      default: () => ({}),
    },
    dialogVisible:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      dataTable: [],
      engineeringIds: [],
      industryOptions: [],
      statusOptions: [],
      currentIndex: 0,
      isEdit:false,
      projectShowDetailInfo: {},
    };
  },
  mounted() {
    if (this.projectShowInfo) {
      this.projectShowDetailInfo = this.projectShowInfo;
      if(this.projectShowDetailInfo.bmsAttachments.length > 1){
            this.currentIndex = 1;
          }
      console.log(this.projectShowDetailInfo);
    }
  },
  created() {
    console.log("-------------------");
    this.getIndex()
    this.getDicts('sys_project_status').then(response => {
      this.statusOptions = response.data
    })

    //行业类别
    industryCategoryTreeTwo().then(res => {
      if (res.code === 200) {
        this.industryOptions = res.data
      }
    })
  },
  methods: {
    getIndex () {
      this.engineeringIds = [];
      (this.performanceKeywordIds = []),
        (this.engineeringIds = []),
        (this.categorys = []),
        (this.categorysTwoIds = []),
        (this.categorysIds = []),
        (this.projectIndicators = []),
        (this.getProjectIndicators = []),
        (this.dataTable = [])
      this.form = {}
      
      projectIndex({ projectId: this.$route.params.id }).then(res => {
        this.dataTable = res

        res.bmsMdEngineeringCategorys
          .filter(item => item.selected === true)
          .map(item => {
            this.engineeringIds.push(item.engineeringId)
            // if (item.indicators.length > 0) {
            //   this.projectIndicators = this.projectIndicators.concat(
            //     item.indicators
            //   )
            // }
            if (item.children.length > 0) {
              this.categorys.push(item.children)
              item.children
                .filter(obj => obj.selected === true)
                .map(obj => {
                  this.categorysTwoIds.push(obj.engineeringId)
                  // this.projectIndicators = this.projectIndicators.concat(
                  //   obj.indicators
                  // )
                })
              item.children.map(obj => {
                if (obj.children.length > 0) {
                  obj.children
                    .filter(obj => obj.selected === true)
                    .map(obj => {
                      this.categorysIds.push(obj.engineeringId)
                      // this.projectIndicators = this.projectIndicators.concat(
                      //   obj.indicators
                      // )
                    })
                }
              })
            }
          })

        res.bmsMdPerformanceKeywords
          .filter(item => item.selected === true)
          .map(item => {
            this.performanceKeywordIds.push(item.performanceKeywordId)
          })
      })
    },
    changedialogVisible() {
      this.$emit("changedialogVisible", false);
    },
    shared() {
    },
    setCurrent(index) {
      this.currentIndex = index;
    },
    preview(item) {
      this.filePreview(item.fileName, item.storagePath);
    },
    download(index) {
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  background-color: #eee;
  padding: 0 !important;
}
.nav {
  background-color: skyblue;
  padding: 5px 12%;
  text-align: right;
}
.content {
  padding: 5px 10%;
}
.panel {
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #c3c6cb;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  padding: 10px;
}
.title > .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title > .left > .item {
  padding-right: 40px;
}

.showPanel {
  background-color: #f2f7ff;
  border: 1px solid #d7d1ff;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.showPanel > .leftImg {
  width: 52%;
  height: 315px;
  border-radius: 4px;
  background-color: #000;
}
.showPanel > .leftImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showPanel > .rightInfo {
  display: flexbox;
  width: 45%;
  height: 315px;
}
.showPanel > .rightInfo > .line1 {
  font-size: 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  padding: 5px 0;
}
.showPanel > .rightInfo > .line1 > i {
  background-color: #4554c5;
  color: #fff;
}
.showPanel > .rightInfo > .line1 > label {
  color: #4554c5;
}
.showPanel > .rightInfo > .line2 {
  padding: 5px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Regular;
}
.showPanel > .rightInfo > .line2 > .tag {
  width: 4px;
  height: 10px;
  margin-right: 10px;
  background-color: #4554c5;
}
.showPanel > .rightInfo > .line3 {
  width: 100%;
  height: 215px;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  color: #7b8290;
  font-size: 16px;
  line-height: 30px;
}
.el-col img {
  width: 100%;
  max-width: 100%;
}

.tabletitle {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  .input-wrap {
    // padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 9em;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: right;
      margin-right: 8px;
      margin-top: 9px;
      flex: 0 0 120px;
      font-weight: 400;
      font-size: 14px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      /deep/.el-input__inner {
        font-family: PingFangSC-Regular;
        // font-size: 16px !important;
        color: #7b8290;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #7b8290;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/.el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.5);
  width: 56px;
  height: 56px;
  .el-icon-arrow-right:before {
    font-size: 18px;
  }
}
/deep/.el-carousel__container {
  height: 250px;
}
</style>